<!DOCTYPE html>
<!-- saved from url=(0035)http://www.html-js.com/article/3286 -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <link rel="Shortcut Icon" href="http://htmljs.b0.upaiyun.com//images/logo.ico?123">
    <link href="http://htmljs.b0.upaiyun.com//images/logo.ico?123" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/main.css" type="text/css">
    <link rel="stylesheet" href="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/prettify.css" type="text/css">
    <link rel="stylesheet" href="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/glyphicons.css" type="text/css">
    <script src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/jquery.js"></script>
    <script src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/htmljs.js"></script>
    <script src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/prettify.js"></script><meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://htmljs.b0.upaiyun.com//images/icon.png" rel="apple-touch-icon">
    <meta name="keywords" content="前端, 前端开发, web前端, web前端开发, 前端开发工程师, 前端开发攻城师,设计, 开发, 前端资源, CSS, JavaScript, Ajax, jQuery, html,html5,css3,浏览器兼容, 前端开发工具, 前端招聘, jQuery API, CSS整形和优化工具 , JS压缩工具 , JS格式化工具 , CSS参考手册 ,HTML参考手册 , 多重搜索 , nodejs , node , boostrap , sublime">
    <meta name="baidu-site-verification" content="OnKVgNu37S">
    <script>if($.browser.msie<8){alert("请不要使用ie浏览本站！本站不支持ie10以下浏览器。")}</script>
    <title>【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖</title><meta name="description" content="CSS中类(classes)和ID的区别。id是独一无二的，一个页面只有一个，类可以有多个。id用”#“，类用“.”用法不一样。比如有几个部分的样式是一样的（或者只有很小的差距），就用class定义一">
    <style>
      #bdshare a{}
      .ad-blank{opacity:0.6;}
    </style>
    <script src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/bootstrap-tooltip.js"></script>
    <script src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/bootstrap-scrollspy.js"></script>
    <script src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/tips.js"></script>
    <link rel="stylesheet" href="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/tips.css" type="text/css">
  <link href="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/bdsstyle.css" rel="stylesheet" type="text/css"><script src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/logger.js"></script></head>
  <body id="article"><iframe frameborder="0" style="display: none;" src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/saved_resource.html"></iframe>
    <div id="header">
      <div class="wrapper clearfix"><a href="http://www.html-js.com/" title="前端乱炖" class="logo"><span class="dun">炖</span></a>
        <div class="navbar navbar-inverse">
          <div class="navbar-inner">
            <div class="container">
              <div class="nav-collapse collapse">
                <ul class="nav left-nav">
                  <li pageid="0" class=""><a href="http://www.html-js.com/"><i class="icon-home"></i>首页</a></li>
                  <li pageid="1" class="active"><a href="http://www.html-js.com/article"><i class="icon-book-open"></i>专栏</a></li>
                  <li pageid="7" class=""><a href="http://www.html-js.com/qa"><i class="icon-lightbulb"></i>问答</a></li>
                  <li pageid="10" class=""><a href="http://www.html-js.com/topic"><i class="icon-group"></i>讨论区</a></li>
                  <li pageid="20" class="hidden "><a href="http://www.html-js.com/talk"><i class="icon-conversation"></i>实时讨论</a></li>
                  <li pageid="15" class="hidden "><a href="http://www.html-js.com/blog"><i class="icon-sampler"></i>博集</a></li>
                  <li pageid="8" class="hidden "><a href="http://www.html-js.com/tag">标签</a></li>
                  <li pageid="2" class="hidden "><a href="http://www.html-js.com/job"><i class="icon-leaf"></i>招聘</a></li>
                  <li pageid="2" class=""><a href="http://www.html-js.com/cards"><i class="icon-nameplate"></i>花名册</a></li>
                  <li pageid="101" class=""><a href="http://www.jiankongbao.com/labs/http">免费性能测试</a></li>
                  <li class="search">
                    <form action="http://www.html-js.com/search" method="get" style="margin:0;"><i class="icon-search"></i>
                      <input id="keyword" type="text" name="q" placeholder="搜索全站、站外内容" class="span2 input-large">
                    </form>
                  </li>
                  <li pageid="6" class="hidden "><a href="http://www.html-js.com/book">免费送书</a></li>
                </ul>
                <ul class="right-nav">
                  <li><a href="http://www.html-js.com/user/login?redirect=%2Farticle%2F3286">登录</a></li>
                  <li><a href="http://www.html-js.com/talk"><i class="icon-conversation"></i>在线聊天</a></li>
                  <li class="hidden sub-trigger"><a>其他功能</a>
                    <ul class="sub-menu hidden">
                      <li pageid="5" class=""><a href="http://www.html-js.com/act">活动</a></li>
                      <li pageid="9" class=""><a href="http://www.html-js.com/tools"><i class="icon-classic-hammer hidden"></i>常用工具</a><span class="my-favs"></span></li>
                      <li><a href="http://www.html-js.com/talk">
                           
                          实时讨论</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        $(".sub-trigger").mouseenter(function(){
          $(".sub-menu",this).removeClass("hidden")
          }).mouseleave(function(){
          $(".sub-menu",this).addClass("hidden")
          })
        })       
    </script>
    <div id="content" class="clearfix">
      <div class="daen"></div>
      <ul class="breadcrumb hidden">
        <li><a href="http://www.html-js.com/">首页</a><span class="divider">/</span></li>
        <li><a href="http://www.html-js.com/article">所有专栏</a><span class="divider">/</span></li>
        <li><a href="http://www.html-js.com/article/column/4623">记录我的前端成长之路！</a><span class="divider">/</span></li>
        <li class="active"><span>【基础性】CSS面试题</span></li>
      </ul>
      <div class="title">
        <div class="wrapper">
          <div style="font-size: 30px;line-height:50px;" href="http://p.html-js.com/article/3286" title="【基础性】CSS面试题" rel="bookmark" class="88">【基础性】CSS面试题</div>
          <div class="info">
            <div class="line"><span class="author vcard item"><a rel="author" href="http://www.html-js.com/user/7498" class="value url fn">体贴的小困</a> 发布在<a href="http://www.html-js.com/article/column/4623" class="value">记录我的前端成长之路！</a></span><span class="item">2015年11月20日</span><span class="item"><span class="index">view：</span><span class="value">2037</span></span><span style="margin-right:10px;color:#999;" class="item">CSS</span>
            </div>
          </div>
        </div>
      </div>
      <div class="content-wapper">
        <div class="content">
          <div class="left"><a href="http://gold.xitu.io/extension/?utm_source=htmljs&amp;utm_medium=banner&amp;utm_content=juhe&amp;utm_campaign=q3_extension" style="margin-top:20px;opacity:1;display:block;background: #eee;margin: 10px 0;cursor: pointer;"> <img src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/1473249478180-b6709d870b90063575966bf1bcd8dee4.png"></a><a href="https://zhuanlan.zhihu.com/p/23538432" style="margin-top:20px;opacity:1;display:block;background: #eee;margin: 10px 0;cursor: pointer;"> <img src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/1478698438615-65e11a061e85c4b9367a6477bb08a6ba.png"></a>
            <div style="margin-top:20px;" class="alert">在文章任何区域双击击即可给文章添加【评注】！浮到评注点上可以查看详情。<div class="checkbox" style="float:right;line-height:40px;color:#333;padding-top:3px;"><label><input type="checkbox" id="hide_tip">隐藏标注</label></div></div>
            <article id="post-3286" style="overflow:hidden;" class="post">
              <div class="wrapper">
                <div style="padding-top:0;" class="entry-content"><!--<a href="http://passport.lagou.com/landingPage.html?utm_source=AD__html-js&amp;utm_medium=banner&amp;utm_campaign=lp" class="ad-blank"></a><img src="http://htmljs.b0.upaiyun.com/uploads/1439192041460-7786e01e91744693f0cc2c15f7ce9ab3.png">--><h2>CSS 中类 (classes) 和 ID 的区别。</h2>

<ul>
<li>id是独一无二的，一个页面只有一个，类可以有多个。</li>
<li>id用”#“，类用“.”</li>
<li>用法不一样。比如有几个部分的样式是一样的（或者只有很小的差距），就用class定义一个样式，然后套用到相似的部分。而id属于独一无二的，像名字一样，不允许重复。</li>
</ul>

<h2>请问 “resetting” 和 “normalizing” CSS 之间的区别？你会如何选择，为什么？</h2>

<p>这是知乎上gNahZ tuNlAw同学的答案：</p>

<p><code class=" language-javascript">CSS Reset</code> 是革命党，<code class=" language-javascript">CSS Reset</code> 里最激进那一派提倡不管你小子有用没用，通通给我脱了那身衣服，凭什么你 body 出生就穿一圈 margin，凭什么你姓 h 的比别人吃得胖，凭什么你 ul 戴一胳膊珠子。于是 <code class=" language-javascript"><span class="token operator">*</span><span class="token punctuation">{</span>margin<span class="token punctuation">:</span><span class="token number">0</span><span class="token punctuation">;</span><span class="token punctuation">}</span></code> 等等运动，把人家全拍扁了。看似是众生平等了，实则是浪费了资源又占不到便宜，有求于人家的时候还得贱贱地给加回去，实在需要人家的默认样式了怎么办？人家锅都扔炉子里烧了，自己看着办吧。
    <code class=" language-javascript">Normalize<span class="token punctuation">.</span>css</code> 是改良派。他们提倡，各个元素都有其存在的道理，简单粗暴地一视同仁是不好的。body 那一圈确实挤压了页面的生存空间，那就改掉。士农工商，谁有谁的作用，给他们制定个规范，确保他们在任何浏览器里都干好自己的活儿。</p>

<p>简单说：</p>

<p>reset.css能够重置浏览器的默认属性。normalize.css保护有用的浏览器默认样式而不是完全去掉它们。
我的答案是选择normalize.css。因为   </p>

<ul>
<li><p>保护有用的浏览器默认样式而不是完全去掉它们</p></li>
<li><p>一般化的样式：为大部分HTML元素提供    </p></li>
<li><p>修复浏览器自身的bug并保证各浏览器的一致性   </p></li>
<li><p>优化CSS可用性：用一些小技巧</p></li>
<li><p>解释代码：用注释和详细的文档来
<a href="http://jerryzou.com/posts/aboutNormalizeCss/">详细点这里</a></p></li>
</ul>

<h2>请解释浮动 (Floats) 及其工作原理。</h2>

<p><a href="http://www.w3school.com.cn/css/css_positioning_floating.asp">w3c对浮动的解释，已经相当经典了。点这里~~</a></p>

<p>简单说就是：</p>

<ul>
<li>浮动元素不在普通流中</li>
<li><p>可向左或像右移动</p></li>
<li><p>当遇到<strong>包含框</strong>或者<strong>其他浮动框</strong>的边缘时停止移动</p></li>
<li>因为以上属性，浮动框可能遮盖住正常流中的元素。</li>
</ul>

<h2>描述z-index和叠加上下文是如何形成的。</h2>

<p>z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。</p>

<p>元素可拥有负的 z-index 属性值。</p>

<p>Z-index 仅能在定位元素上奏效（例如 position:absolute;）！</p>

<p>该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远</p>

<h2>请描述 BFC(Block Formatting Context) 及其如何工作。</h2>

<p>BFC:块级格式上下文。定义：</p>

<p>浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。</p>

<p>在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。两个相邻的块级盒子的垂直外边距会发生叠加。</p>

<p>在块级格式化上下文中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。</p>

<p><a href="http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html">非常详细的解释，点这里！</a></p>

<h2>列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。</h2>

<pre class=" language-javascript"><code class=" language-javascript">请解释 CSS sprites，以及你要如何在页面或网站中实现它。
你最喜欢的图片替换方法是什么，你如何选择使用。
你会如何解决特定浏览器的样式问题？
如何为有功能限制的浏览器提供网页？
    你会使用哪些技术和处理方法？
有哪些的隐藏内容的方法 <span class="token punctuation">(</span>如果同时还要保证屏幕阅读器可用呢<span class="token punctuation">)</span>？
你用过栅格系统 <span class="token punctuation">(</span>grid system<span class="token punctuation">)</span> 吗？如果使用过，你最喜欢哪种？
你用过媒体查询，或针对移动端的布局<span class="token operator">/</span>CSS 吗？
你熟悉 SVG 样式的书写吗？
如何优化网页的打印样式？
在书写高效 CSS 时会有哪些问题需要考虑？
使用 CSS 预处理器的优缺点有哪些？
    请描述你曾经使用过的 CSS 预处理器的优缺点。
如果设计中使用了非标准的字体，你该如何去实现？
请解释浏览器是如何判断元素是否匹配某个 CSS 选择器？
请描述伪元素 <span class="token punctuation">(</span>pseudo<span class="token operator">-</span>elements<span class="token punctuation">)</span> 及其用途。
请解释你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。
请解释 <span class="token operator">*</span> <span class="token punctuation">{</span> box<span class="token operator">-</span>sizing<span class="token punctuation">:</span> border<span class="token operator">-</span>box<span class="token punctuation">;</span> <span class="token punctuation">}</span> 的作用<span class="token punctuation">,</span> 并且说明使用它有什么好处？
请罗列出你所知道的 display 属性的全部值
请解释 inline 和 inline<span class="token operator">-</span>block 的区别？
请解释 relative、fixed、absolute 和 static 元素的区别
CSS 中字母 <span class="token string">'C'</span> 的意思是叠层 <span class="token punctuation">(</span>Cascading<span class="token punctuation">)</span>。请问在确定样式的过程中优先级是如何决定的 <span class="token punctuation">(</span>请举例<span class="token punctuation">)</span>？如何有效使用此系统？
你在开发或生产环境中使用过哪些 CSS 框架？你觉得应该如何改善他们？
请问你有尝试过 CSS Flexbox 或者 Grid 标准规格吗？
为什么响应式设计 <span class="token punctuation">(</span>responsive design<span class="token punctuation">)</span> 和自适应设计 <span class="token punctuation">(</span>adaptive design<span class="token punctuation">)</span> 不同？
你有兼容 retina 屏幕的经历吗？如果有，在什么地方使用了何种技术？
请问为何要使用 <span class="token function">translate<span class="token punctuation">(</span></span><span class="token punctuation">)</span> 而非 absolute positioning，或反之的理由？为什么？
</code></pre><script src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/tuiku.js"></script>
                </div>
                <div class="entry-meta">
                  <p>本站专栏文章皆为原创，转载请注明出处（带有 前端乱炖 字样）和本文的显式链接(<a href="http://www.html-js.com/article/3286">http://www.html-js.com/article/3286</a>)，本站和作者保留随时要求删除文章的权利！</p>
                </div>
              </div>
            <div class="tip-comments" style="display: none;"><ul class="comment-list"></ul><form class="tip-comment-form"><textarea placeholder="添加讨论…" class="tip-comment-textarea"></textarea><div class="form-control"><button class="tip-submit" type="submit">提交</button></div></form></div></article>
            <div id="comment" class="comment module">
              <div class="hd">评论</div>
              <div class="bd">
                <div class="publish">
                  <textarea id="comment-text" placeholder="参与讨论。支持markdown语法" class="input-block-level"></textarea>
                  <div id="comment-submit" class="btn comment-submit">发表评论</div>
                </div>
                <div class="comment-list">
                  <div class="comment-item clearfix"><a class="headpic"><img data-original="http://tp3.sinaimg.cn/1313649214/50/22856904433/0" width="70" height="70"></a>
                    <div class="comment-right">
                      <div class="con"><span class="author vcard item"><a rel="author" href="http://www.html-js.com/user/910" class="value url fn">慢慢慢慢纸</a>
                          <div class="hd-time">3个月前</div></span>
                        <div class="html">赞了此文章！</div>
                      </div>
                      <div class="time"><a data-nick="慢慢慢慢纸" class="reply">回复</a></div>
                    </div>
                  </div>
                </div>
                <script id="comment-tpl" type="text/template">
                  <div class="comment-item clearfix"><a class="headpic"><img src="{{user_headpic}}" width="70" height="70"></a>
                    <div class="comment-right">
                      <div class="con"><span class="author vcard item"><a rel="author" href="/user/{{user_id}}" class="value url fn">{{user_nick}}：</a></span>
                        <div class="html">{{{html}}}</div>
                      </div>
                      <div class="time">{{createdAt}}<a data-nick="{{user_nick}}" class="reply">回复</a></div>
                    </div>
                  </div>
                </script>
              </div>
            </div>
          </div>
        </div>
        <div class="right"><!--<a target="_blank" href="http://www.oneapm.com/bi/feature.html?utm_source=htmljs&amp;utm_medium=billboard&amp;utm_term=bi&amp;utm_campaign=JulyTechAds&amp;from=maadfisejs" style="width:100%;display:block;margin-top:20px;" class="ad-blank"><img src="http://htmljs.b0.upaiyun.com/uploads/1436597035936-4450bd15970bac6348a570d12c151324.png"></a>-->
          <div style="padding:0;margin-top:20px;" class="module"><img src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/1417158556053-未标题-5.png"></div>
          <div class="writer-and-column clearfix">
            <div class="writer module">
              <div class="hd">WRITTEN BY</div>
              <!--a.head-pic(href="/user/#{writer.id}")-->
              <!--  img(src='#{writer.head_pic}')-->
              <div class="info"><a href="http://www.html-js.com/user/7498" class="nick">体贴的小困</a>
                <div class="desc">一入前端深似海，从此动漫是路人</div><a href="http://weibo.cn/5714749080" target="_blank" class="weibo">TA的新浪微博</a>
              </div>
            </div>
            <div class="column module">
              <div class="hd">PUBLISHED IN</div>
              <div class="info"><a href="http://www.html-js.com/article/column/4623" class="name">记录我的前端成长之路！</a>
                <div class="desc"><p>已经学习前端一个月了，会把每天所学的东西总结。如果有什么错误的话，希望大家指正，也希望能帮助其他新人，谢谢~</p></div>
                <div class="action"><a href="http://www.html-js.com/article/column/1/rss" class="rssit btn small-btn"><i class="rss social"></i> 订阅</a></div>
              </div>
            </div>
          </div>
          <div class="other-articles module">
            <div class="hd">本专栏其他文章</div>
            <div class="bd">
              <div class="item"><a href="http://www.html-js.com/article/3286">【基础性】CSS面试题</a>
                <div class="others"><span class="time">时间:2015-11-20</span><span class="visit_count">浏览:2037</span><span class="zan_count">赞:1</span></div>
              </div>
              <div class="item"><a href="http://www.html-js.com/article/3279">【基础性】HTML面试问题</a>
                <div class="others"><span class="time">时间:2015-11-17</span><span class="visit_count">浏览:1537</span><span class="zan_count">赞:0</span></div>
              </div>
              <div class="item"><a href="http://www.html-js.com/article/3271">【基础性】前端基础知识-CSS向-层叠问题。</a>
                <div class="others"><span class="time">时间:2015-11-15</span><span class="visit_count">浏览:623</span><span class="zan_count">赞:1</span></div>
              </div>
            </div>
          </div>
          <div class="bottom-action module">
            <div class="wrapper">
              <div class="actions"><a href="javascript:void(0);" class="zan action"><i class="icon-thumbs-up"></i><em>赞</em> <span>1</span></a><span class="zanlogs"><a href="http://www.html-js.com/user/910" data-original-title="❤ Hacker and painter ❤ " class="tooltip-trigger"><img data-original="http://tp3.sinaimg.cn/1313649214/50/22856904433/0" src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/0" style="display: inline;"></a></span>
              </div>
              <div class="actions"><a target="_blank" href="http://service.weibo.com/share/share.php?url=http%3A%2F%2Fwww.html-js.com%2Farticle%2F3286&amp;title=%E5%88%86%E4%BA%AB%E4%B8%80%E7%AF%87@%E4%BD%93%E8%B4%B4%E7%9A%84%E5%B0%8F%E5%9B%B0%20%E7%9A%84%E5%8E%9F%E5%88%9B%E6%96%87%E7%AB%A0%E3%80%90%E3%80%90%E5%9F%BA%E7%A1%80%E6%80%A7%E3%80%91CSS%E9%9D%A2%E8%AF%95%E9%A2%98%E3%80%91%E6%9D%A5%E8%87%AA@%E5%89%8D%E7%AB%AF%E4%B9%B1%E7%82%96%20%E4%B8%93%E6%A0%8F%E3%80%8C%E8%AE%B0%E5%BD%95%E6%88%91%E7%9A%84%E5%89%8D%E7%AB%AF%E6%88%90%E9%95%BF%E4%B9%8B%E8%B7%AF%EF%BC%81%E3%80%8D%20%E3%80%82%E5%89%8D%E7%AB%AF%E4%B9%B1%E7%82%96%E6%98%AF%E4%B8%80%E4%B8%AA%E4%B8%93%E4%B8%9A%E7%9A%84%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E5%8E%9F%E5%88%9B%E5%86%85%E5%AE%B9%E7%A4%BE%E5%8C%BA&amp;pic=http://www.html-js.com/uploads/article_thumb/3286.png&amp;appkey=659341943" class="action"><i class="icon-new-window"></i><em style="background:none !important;float:none;display:inline;padding:0;" class="bds_more">分享到微博</em></a><a href="javascript:void(0);" class="add_fav action"><em>收藏</em> <span>2</span></a>
              </div>
            </div>
          </div>
          <div id="fixed-modules" class="fixed" style="position: fixed; top: 0px;"><a target="_blank" href="http://www.appcan.cn/" style="width:100%;display:block;" class="ad-blank"><img src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/1430307535247-前端乱炖.gif"></a><a target="_blank" href="http://www.jiankongbao.com/" style="width:100%;display:block;" class="ad-blank"><img src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/1461145783134-4e913d3582645ce5b5e12859c8b62b94.jpg"></a>
            <!--a.ad-blank(target="_blank",href="https://coding.net/marketing/codeinsight?hmsr=http%3A%2F%2Fwww.html-js.com%2F&hmmd=%E5%9B%BE%E7%89%87%E5%B9%BF%E5%91%8A&hmpl=CodeInsight&hmkw=&hmci=",style="width:280px;height:120px;display:block;")-->
            <!--  img(src="http://htmljs.b0.upaiyun.com/uploads/1425371986895-coding.png")-->
          </div>
        </div>
      </div>
      <p>
        <script id="bdshare_js" data="type=tools&amp;uid=2555549" src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/bds_s_v2.js"></script>
        
        <script type="text/javascript">
        var bds_config={"bdText":"分享一篇@体贴的小困 的原创文章【【基础性】CSS面试题】来自@前端乱炖 专栏「记录我的前端成长之路！」 {{前端乱炖是国内最专业的前端知识原创内容社区}}","bdPic":"http://www.html-js.com/uploads/article_thumb/3286.png","snsKey":{'tsina':'659341943','tqq':'','t163':'','tsohu':''}}
        document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
        </script>
      </p>
      <script id="tip_tpl" type="text/template">
        {{#tips}}
          <li class="ng-scope single-comment pin-comment">
            <div class="comment-body ng-binding" >{{content}}</div>
            <div class="comment-meta">
              <span class="author-name ng-binding">— {{user_nick}} </span>
              <time class="create-time" >{{time}}</time>
            </div>
          </li>
          {{/tips}}
      </script>
    </div>
    <script src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/mustache.js"></script>
    <script src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/messageTip.js"></script><div class="message-tip" style="display: none;">欢迎光临</div>
    <script src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/loadingTip.js"></script><div class="loading-tip">正在加载中。。。</div>
    <script src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/lazyload.js"></script>
    <script>
      $(window).scroll(function(){
        if($(window).scrollTop()+$(window).height()>=$(".comment").offset().top){
          $(".comment-layer").addClass("hidden")
        }else{
        $(".comment-layer").removeClass("hidden")
        }
        })
      $(".comment-layer").click(function(){
        $("html,body").animate({
          scrollTop:$(".comment").offset().top-200
          })
        $(".comment textarea").focus()
        })
      var comment_tpl = $("#comment-tpl").html()
      //- loadingTip.show("评论加载中")
      //- $.ajax({
      //-   url:"/comment/article_3286",
      //-   type:"get",
      //-   dataType:"json",
      //-   success:function(data){
      //-     loadingTip.hide("正在提交中")
      //-       if(data.success){
      //-       for(var i=0;i<data.comments.length;i++){
      //-       var comment = data.comments[i]
      //-         var html = Mustache.render(comment_tpl,comment);
      //-         $(".comment-list").append(html)
      //-         $(".reply").click(function(){
      //-   $("#comment-text").val("@"+$(this).attr("data-nick")+" ").focus()
      //-    $("#comment-text")[0].setSelectionRange($("#comment-text")[0].value.length, $("#comment-text")[0].value.length)
      //-   })
      //-       }
      //-       }else{
      //-       alert(data.info)
      //-       }
      
      //-   }
      //-   })
      $(".headpic img").lazyload();
      $(".tooltip-trigger img").lazyload();
      $(".reply").click(function(){
        $("#comment-text").val("@"+$(this).attr("data-nick")+" ").focus()
         $("#comment-text")[0].setSelectionRange($("#comment-text")[0].value.length, $("#comment-text")[0].value.length)
        })
      $("#comment-submit").click(function(){
        var text = $("#comment-text").val();
        if(!text){
          messageTip.show("请输入评论内容");
        }else{
          loadingTip.show("正在提交中")
           HtmlJS.util.ajax("/comment/add",{
              md:text,
              target_id:"article_3286"
           },"post",function(data){
              loadingTip.hide()
                if(data.success){
                $("#comment-text").val("")
                var html = Mustache.render(comment_tpl,data.comment);
                  $(".comment-list").prepend(html)
                }else{
                  alert(data.info)
                }
           },function(){
           
            },null,function(){
            HtmlJS.util.ajax("/comment/add",{
              md:text,
              target_id:"article_3286"
            },"post",function(data){
              loadingTip.hide()
                if(data.success){
                $("#comment-text").val("")
                var html = Mustache.render(comment_tpl,data.comment);
                  $(".comment-list").prepend(html)
                }else{
                  alert(data.info)
                }
            },function(){
            
            },null,function(){
            
          })
          })
        }
        })
        
        $(".zan").click(function(){
          var self = this;
            HtmlJS.util.ajax("/article/3286/zan",{
              score:$(self).attr("data-index")
            },"post",function(data){
              loadingTip.hide()
                if(data.success){
                
                  messageTip.show("成功！")
                    $("em",self).html("已赞")
                    $("span",self).html($("span",self).html()*1+1)
                }else{
                  alert(data.info)
                }
            },function(){
            
            },null,function(){
            HtmlJS.util.ajax("/article/3286/zan",{
              score:$(self).attr("data-index")
            },"post",function(data){
              loadingTip.hide()
                if(data.success){
                  messageTip.show("成功！")
                    $("em",self).html("已赞")
                    $("span",self).html($("span",self).html()*1+1)
                }else{
                  alert(data.info)
                }
            },function(){
            
            },null,function(){
            
          })
          })
          })
          $('.user').tooltip({
          placement:"bottom"
          });
          $(".add_fav").click(function(){
            var self=this;
            HtmlJS.util.ajax("/user/fav",{
              uuid:"bdfcc853-6ced-49e6-9a85-8c6c66bab2cd"
            },"post",function(data){
                loadingTip.hide()
                if(data.success){
                  messageTip.show("收藏成功！")
                    $("em",self).html("已收藏")
                     $("span",self).html($("span",self).html()*1+1)
                }else{
                  alert(data.info)
                }
            },function(){},null,function(){
                HtmlJS.util.ajax("/user/fav",{
                  uuid:"bdfcc853-6ced-49e6-9a85-8c6c66bab2cd"
                },"post",function(data){
                    loadingTip.hide()
                    if(data.success){
                      messageTip.show("收藏成功！")
                         $("em",self).html("已收藏")
                          $("span",self).html($("span",self).html()*1+1)
                    }else{
                      alert(data.info)
                    }
                },function(){
                })
            })
            });
            $(document).ready(function(){
                if($(window).width()>600){
                  new Tip().init({
                      selector:".post",
                      url:"/tip/add",
                      uuid:"3286"
                  })
                }
                
            })
            
    </script>
    <div id="footer">
      <div class="wrapper">
        <div class="module">
          <div style="font-size:12px;line-height:20px;">Power By NodeJS，本站所有代码的地址在<a href="https://github.com/xinyu198736/htmljs" target="_blank">这里</a>  浙ICP备12047043号  <a href="http://www.html-js.com/friendlink">友情链接</a>  <a href="https://f2e.souche.com/blog" target="_blank">大搜车前端团队博客</a></div>
        </div>
      </div>
    </div>
    <div id="coin-fixed"><span id="gotop"><i class="icon-airplane"></i></span><span class="my-favs"><i class="icon-heart"></i><a href="http://www.html-js.com/user/fav"> 我的收藏      </a></span>
    </div>
    <script>
      try{
        $('.tooltip-trigger').tooltip({
              placement:"bottom"
              });
      }catch(e){};
      
      
      
    </script>
    <div class="hidden">
      <script>
        var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
        document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F2fc2fae0509f820259c1760fce28d7d2' type='text/javascript'%3E%3C/script%3E"));
        
      </script><script src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/h.js" type="text/javascript"></script><a href="http://tongji.baidu.com/hm-web/welcome/ico?s=2fc2fae0509f820259c1760fce28d7d2" target="_blank"><img border="0" src="./【基础性】CSS面试题 - 记录我的前端成长之路！ - 前端乱炖_files/21.gif" width="20" height="20"></a>
    </div>
  
</body></html>